<template>
	<div class="wrap">
		<div class="loanBanner">
			<p>
				<span>微额借款</span>
				应急首选，解你燃眉之急
			</p>
			<img src="../assets/loanBanner.jpg" />
			<a href="javascript:history.back()" class="back"> &lsaquo; </a>
		</div>
		<div class="loanDetail">
			<dl>
				<dt>产品要点</dt>
				<dd>
					<p v-for="item in proinfo">{{ item.title }}<span class="fr">{{ item.con }}</span></p>
				</dd>
			</dl>
			<dl>
				<dt>需要资料</dt> 
				<dd><p>{{ data }}</p></dd>
			</dl>
			<dl class="hasIcon pro">
				<dt @click="pro = !pro;">产品特点 <span :class="['arrow',{up:pro}]">﹀</span></dt> 
				<transition name="fade">
					<dd v-show="pro"><p>{{ prochar }}</p></dd>
				</transition>
			</dl>
			<dl class="hasIcon hot">
				<dt @click="hot = !hot;">好借好还，再借不难 <em></em><span :class="['arrow',{up:hot}]">﹀</span> </dt> 
				<transition name="fade">
					<dd v-show="hot">
						<p>{{ hot[0] }}<br> {{ hot[1] }} <br> {{ hot[2] }} </p>
					</dd>
				</transition>
			</dl>
			<div class="btn">
				<span class="subBtn">申请借款</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
   	data() {
      	return {
			pro : false,
			hot : false,
			proinfo : [
				{
					title : '借款金额',
					con : '500元、1000元'
				},
				{
					title : '借款期限',
					con : '7天、14天、21天'
				},
				{
					title : '借款利率',
					con : '年化7%'
				},
				{
					title : '期初服务费',
					con : '3%-8%'
				},
				{
					title : '还款方式',
					con : '到期一次性还本付息'
				}
			],
			data : `1、本人身份证、银行卡  2、有实名认证的手机号码，且使用时长超过3个月`,
			prochar : '申请快速借款需要的资料较少，审批速度快，适合急切需要小额资金的用户。',
			hot : [
				'勿递交虚假材料，否则会被认定为骗贷；','请给审核流程多一点耐心，审核时间 1-2 天；','勿逾期还款，珍惜信用。'
			]
      	}
   	},
   	methods : {

   	}
}
</script>

<style lang="">
	.loanBanner{position: relative; overflow: hidden;}
	.loanBanner p{position: absolute; color: #fff; font-size: 0.16rem; width: 100%; text-align: center; top:0.5rem;}
	.loanBanner p span{display: block; padding-bottom: 0.06rem; font-size: 0.2rem;}
	.loanBanner img{width:100%;}
	.loanBanner .back{position: absolute; top:0.06rem; left: 0.1rem; color: #fff; font-size: 0.2rem; }
	.loanDetail {overflow: hidden; padding-bottom: 0.6rem;}
	.loanDetail dl{background: #fff; margin-top: 0.1rem;}
	.loanDetail dl dt{height: 0.34rem; line-height: 0.34rem; text-indent: 0.12rem; font-weight: 700;}
	.loanDetail dl dd{line-height: 0.24rem; padding: 0.08rem 0.1rem; border-top: 1px solid #e5e5e5;}
	.loanDetail dl dd p{font-size: 0.13rem;}
	.loanDetail dl .fr{float: right;}
	.loanDetail .btn{background: #fff; max-width: 610px; position: fixed; bottom: 0; padding: 0.08rem; border-top: 1px solid #e5e5e5; width: 100%;}
	.loanDetail .btn .subBtn{width:95%; margin:0 auto; background: #3297fd; color:#fff; font-size: 0.18rem; height: 0.36rem; line-height: 0.36rem; text-align:center; border-radius: 0.06rem; cursor: pointer; display: block;}
	.loanDetail .hot em{width:0.08rem; height: 0.08rem; background: #f33; border-radius: 50%; display: inline-block;}
	.loanDetail .hasIcon .arrow{float: right; margin-right: 0.1rem; color: #ccc;}
	.loanDetail .hasIcon .up{display:inline-block; -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); -webkit-transition: 0.3s all; -o-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; transition: 0.3s all;}
	.fade-enter-active, .fade-leave-active {transition:.3s all;}
	.fade-enter, .fade-leave-to {opacity: 0;filter:alpha(opacity=0);}
</style>